<template>
  <div class="login-container">
    <div class="login-card">
      <div class="login-header">
        <div class="login-logo">logo</div>
        <div class="welcome-text">欢迎回来</div>
      </div>
      <form class="login-form" @submit.prevent="handleLogin">
        <div class="input-group">
          <i class="fa-regular fa-user icon-prefix"></i>
          <input
            v-model.trim="form.username"
            type="text"
            placeholder="手机号"
            class="input-field"
            required
          />
        </div>
        <div class="input-group">
          <i class="fa-regular fa-lock icon-prefix"></i>
          <input
            v-model="form.password"
            :type="showPassword ? 'text' : 'password'"
            placeholder="密码"
            class="input-field"
            required
          />
          <i
            class="icon-suffix fa-regular cursor-pointer"
            :class="showPassword ? 'fa-eye-slash' : 'fa-eye'"
            @click="togglePassword"
          ></i>
        </div>
        <div class="form-actions">
          <label class="remember">
            <input type="checkbox" v-model="remember" />
            <span>记住密码</span>
          </label>
          <RouterLink to="/forgot" class="forgot">忘记密码?</RouterLink>
        </div>
        <button type="submit" class="login-btn" :disabled="submitting">
          {{ submitting ? '登录中...' : '登 录' }}
        </button>
      </form>
      <p v-if="errorMessage" class="error-message">{{ errorMessage }}</p>
      <div class="other-login">
        <div class="divider">
          <span>其他登录方式</span>
        </div>
        <div class="social-login">
          <button class="social-btn"><i class="fab fa-weixin"></i></button>
          <button class="social-btn"><i class="fab fa-qq"></i></button>
          <button class="social-btn"><i class="fab fa-weibo"></i></button>
        </div>
      </div>
      <div class="register-link">
        还没有账号？ <RouterLink to="/register/student">立即注册</RouterLink>
      </div>
      <div class="footer">
        <p>© 2024 logo <a href="#">隐私策略</a> | <a href="#">用户协议</a></p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import axios from 'axios';

const router = useRouter();
const apiClient = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080',
  timeout: 5000,
  headers: { 'Content-Type': 'application/json' }
});

const form = reactive({
  username: '',  // 对应后端的 username 字段
  password: ''
});
const remember = ref(false);
const showPassword = ref(false);
const errorMessage = ref('');
const submitting = ref(false);

function togglePassword() {
  showPassword.value = !showPassword.value;
}

function loadStoredCredentials() {
  const storedUsername = localStorage.getItem('username');
  const storedPassword = localStorage.getItem('password');
  if (storedUsername && storedPassword) {
    form.username = storedUsername;
    form.password = storedPassword;
    remember.value = true;
  }
}

async function handleLogin() {
  errorMessage.value = '';
  if (!form.username || !form.password) return;
  submitting.value = true;
  try {
    const res = await apiClient.post('/user/signin', {
      username: form.username,
      password: form.password
    });
    const { code, msg } = res.data;
    if (code === 0) {
      // 登录成功
      if (remember.value) {
        localStorage.setItem('username', form.username);
        localStorage.setItem('password', form.password);
      } else {
        localStorage.removeItem('username');
        localStorage.removeItem('password');
      }
      // 根据角色或需求跳转，这里假设跳转到首页
      router.push('/');
    } else {
      errorMessage.value = msg || '登录失败';
    }
  } catch (err: any) {
    console.error('登录请求出错:', err);
    errorMessage.value = err.response?.data?.msg || '网络或服务器错误，请稍后重试';
  } finally {
    submitting.value = false;
  }
}

onMounted(() => {
  loadStoredCredentials();
});
</script>

<style scoped>
/* --- 样式保持一致，保持整体页面美观 --- */
.error-message {
  color: red;
  text-align: center;
  margin-bottom: 10px;
}

.login-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6e8efb 0%, #7873f5 100%);
  padding: 20px;
}

.login-card {
  background: white;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  width: 400px;
}

.login-header {
  text-align: center;
  margin-bottom: 30px;
}

.login-logo {
  font-size: 24px;
  font-weight: bold;
  color: #7873f5;
  margin-bottom: 10px;
}

.welcome-text {
  color: #666;
  font-size: 16px;
}

.login-form {
  margin-bottom: 30px;
}

.input-group {
  position: relative;
  margin-bottom: 20px;
}

.input-field {
  width: 80%;
  padding: 12px 40px;
  border-radius: 6px;
  background: #f5f6fa;
  font-size: 14px;
  outline: none;
}

.icon-prefix {
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #999;
}

.icon-suffix {
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  color: #999;
}

.form-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.remember {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #666;
}

.forgot {
  color: #7873f5;
  text-decoration: none;
}

.login-btn {
  width: 100%;
  padding: 12px;
  background: #7873f5;
  color: white;
  border: none;
  font-size: 16px;
  cursor: pointer;
  margin-bottom: 30px;
  border-radius: 6px;
}

.other-login {
  margin-bottom: 30px;
}

.divider {
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 45%;
  height: 1px;
  background: #eee;
}

.divider::before {
  left: 0;
}

.divider::after {
  right: 0;
}

.divider span {
  background: white;
  padding: 0 10px;
  color: #999;
  font-size: 14px;
}

.social-login {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.social-btn {
  width: 40px;
  height: 40px;
  border: 1px solid #eee;
  background: white;
  cursor: pointer;
  border-radius: 6px;
}

.social-btn i {
  font-size: 20px;
}

.social-btn:nth-child(1) i {
  color: #07c160;
}

.social-btn:nth-child(2) i {
  color: #12b7f5;
}

.social-btn:nth-child(3) i {
  color: #e6162d;
}

.register-link {
  text-align: center;
  margin-bottom: 20px;
  color: #666;
}

.register-link a {
  color: #7873f5;
  text-decoration: none;
}

.footer {
  text-align: center;
  color: #999;
  font-size: 12px;
}

.footer a {
  color: #666;
  text-decoration: none;
}
</style>
